/*
  学习目标：useEffect可以监听多个状态的变化
  需求：将count + msg方法title上
*/
import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello react');
  // 1. useEffect 可以同时监听多个依赖
  // 场景： 如果是相同的业务，就一起监听，否则就分开监听
  useEffect(() => {
    document.title = count + msg;
  }, [count, msg]);

  // 2. 分开监听 - 原理 -多个  useEffect 不会覆盖，而是分别执行，与 vue3 一样
  useEffect(() => {
    console.log('count -----> ', count);
    localStorage.setItem('count', count);
  }, [count]);

  useEffect(() => {
    console.log('msg -----> ', msg);
    localStorage.setItem('msg', msg);
  }, [msg]);

  return (
    <div>
      count - {count} msg - {msg}
      <button onClick={() => setCount(count + 1)}>点我修改count</button>
      <button onClick={() => setMsg(msg + '~')}>点我修改msg</button>
    </div>
  );
}
